AI 搜索

GitHub Pages + Hexo 搭建个人博客网站，史上最全教程

最新推荐文章于 2025-05-13 14:20:20 发布
于 2021-07-25 23:02:54 发布
阅读量 7.4w 收藏 623
点赞数 232
CC 4.0 BY-SA 版权
分类专栏： 建站 文章标签： Hexo Git

文章目录


本文介绍如何使用 GitHub Pages + Hexo 搭建个人博客网站，完全免费，所有内容本人亲测，绝对可用。

一、准备工作

1. GitHub 账号

需要有一个 GitHub 账号，没有的话到 官网 申请一个。
注册很简单，不懂的话可以参考 GitHub 申请账号

2. 安装 Git

在自己电脑上安装好 Git，hexo 部署到 GitHub 时要用。
网上找篇教程或者参考 Git 安装 (Windows)

3. 安装 NodeJS

在自己电脑上安装好 NodeJS，Hexo 是基于 NodeJS 编写的，所以需要安装 NodeJS 和 npm 工具。
网上找篇教程或者参考 NodeJS 安装及配置 (Windows)

二、创建仓库

在 GitHub 上创建一个新的代码仓库用于保存我们的网页。

点击 Your repositories，进入仓库页面。
请添加图片描述
点击 New 按钮，进入仓库创建页面。
请添加图片描述
填写仓库名，格式必须为 <用户名>.github.io，然后点击 Create repository。
请添加图片描述
点击 creating a new file 创建一个新文件，作为我们网站的主页。
请添加图片描述
新文件的名字必须为 index.html，内容先随便写一个简单的，内容示例如下，填写之后点击 Commit new file 提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>yaorongke</title>
</head>
<body>
    <h1>yaorongke的个人主页</h1>
    <h1>Hello ~</h1>
</body>
</html>

html
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

请添加图片描述
GitHub Pages 中找到我们主页的地址为 https://yaorongke.github.io/
请添加图片描述
浏览器中访问，展示成功。
请添加图片描述
这里创建的网页是非常简陋的，只是为了演示下 GitHub Pages 的使用方式。

三、安装 Hexo

我们采用 Hexo 来创建我们的博客网站，Hexo 是一个基于 NodeJS 的静态博客网站生成器，使用 Hexo 不需开发，只要进行一些必要的配置即可生成一个个性化的博客网站，非常方便。点击进入 官网。

安装 Hexo

npm install -g hexo-cli

shell
  • 1

查看版本

hexo -v

shell
  • 1

创建一个项目 hexo-blog 并初始化

hexo init hexo-blog
cd hexo-blog
npm install

shell
  • 1
  • 2
  • 3

本地启动

hexo g
hexo server

shell
  • 1
  • 2

浏览器访问 http://localhost:4000，页面默认主图风格如下
请添加图片描述

四、更换主题

Hexo 默认的主题不太好看，不过官方提供了数百种主题供用户选择，可以根据个人喜好更换，官网主题点 这里 查看。这里介绍两个主题的使用方法，Next 和 Fluid，个人比较喜欢 Fluid，后面章节的功能也是以 Fluid 为基础进行讲解的。

1. NexT 主题

安装主题

cd hexo-blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

shell
  • 1
  • 2

使用 NexT 主题

打开 _config.yml 文件，该文件为站点配置文件
请添加图片描述
将主题修改为 next

theme: next

shell
  • 1

本地启动

hexo g -d
hexo s

shell
  • 1
  • 2
2. Fluid 主题

以下安装步骤摘自 Fluid 官网

安装主题

下载 最新 release 版本 解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

指定主题

如下修改 Hexo 博客目录中的 _config.yml：

theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

shell
  • 1
  • 2

创建「关于页」

首次使用主题的「关于页」需要手动创建：

hexo new page about

  • 1

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

---
title: about
date: 2020-02-23 19:20:33
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

本地启动

hexo g -d
hexo s

shell
  • 1
  • 2

浏览器访问 http://localhost:4000，Fluid 主题风格页面如下
请添加图片描述

五、创建文章

如下修改 Hexo 博客目录中的 _config.yml，打开这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件。

post_asset_folder: true

yaml
  • 1

执行如下命令创建一篇新文章，名为《测试文章》

hexo new post 测试文章

shell
  • 1

执行完成后在 source\_posts 目录下生成了一个 md 文件和一个同名的资源目录 (用于存放图片)
请添加图片描述
在资源目录测试文章中放一张图片 test.png
请添加图片描述
在测试文章.md 中添加内容如下，演示了图片的三种引用方式。第一种为官方推荐用法，第二种为 markdown 语法，第三种和前两种图片存放位置不一样，是将图片放在 \source\images 目录下。这三种写法在 md 文件中图片是无法显示的，但是在页面上能正常显示。

图片的引入方式可参考官方文档 https://hexo.io/zh-cn/docs/asset-folders.html，有详细介绍。

---
title: 测试文章
date: 2021-06-10 16:35:20
tags:
- 原创
categories:
- Java
---

这是一篇测试文章

{% asset_img test.png 图片引用方法一 %}

![图片引用方法二](test.png)

![图片引用方法三](/images/test.png)

markdown
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

本地启动

hexo g -d
hexo s

shell
  • 1
  • 2

浏览器访问 http://localhost:4000，页面如下，文章添加成功
请添加图片描述

六、个性化页面展示

页面的标题等位置显示默认的文字，可以改下显示一些个性化的信息。

1. 浏览器 tab 页名称

修改根目录下 _config.yml 中的 title 字段。
请添加图片描述

2. 博客标题

主题目录 themes\fluid 下 _config.yml 中的 blog_title 字段。

请添加图片描述

3. 主页正中间的文字

主题目录 themes\fluid 下 _config.yml 中的 text 字段。
请添加图片描述
修改好配置后，页面效果如下，可以看到现在显示的内容变成了我们的个人信息。
请添加图片描述

七、添加阅读量统计

Fluid 主题写好了统计阅读量的代码，但是缺少相应配置所以没有开启，需要借助三方服务来统计阅读量，这里是有 Leancloud 的免费服务来进行统计。

1. 申请 LeanCloud 账号并创建应用

进入 官网 注册账号
请添加图片描述
需实名认证，完成后才能使用各项服务
请添加图片描述
验证邮箱
请添加图片描述
创建应用，选择开发版即可，免费的
请添加图片描述
进入该应用的 设置->应用凭证，找到 AppID 和 AppKey，记录下来后面配置要用
请添加图片描述

2. 修改 Fluid 配置

打开主题目录 themes\fluid 下的 _config.yml 文件，修改如下配置

单篇文章阅读量计数

打开统计开关
请添加图片描述
配置 leancloud 的 app_id 和 app_key
请添加图片描述
打开计数功能，统计来源改为 leancloud
请添加图片描述
页面效果
请添加图片描述

页面底部展示网站的 PV、UV 统计数

请添加图片描述
页面效果
请添加图片描述

八、添加评论功能

评论功能的代码已经写好了，只不过没有开启，需要修改一些配置

打开主题目录 themes\fluid 下的 _config.yml 文件，修改如下配置

启用评论插件
请添加图片描述
配置 LeanCloud 的 appId 和 appkey
请添加图片描述
重新部署后，查看页面效果，评论功能已开启
请添加图片描述
部署在本地时评论无法提交，会报跨域问题，发布到 GitHub Pages 上之后课正常提交评论

九、发布到 GitHub Pages

方式一

安装 hexo-deployer-git

npm install hexo-deployer-git --save

shell
  • 1

修改根目录下的 _config.yml，配置 GitHub 相关信息

deploy:
  type: git
  repo: https://github.com/yaorongke/yaorongke.github.io.git
  branch: main
  token: ghp_3KakcaPHerunNRyMerofcFd9pblU282FSbsY

yaml
  • 1
  • 2
  • 3
  • 4
  • 5

其中 token 为 GitHub 的 Personal access tokens，获取方式如下图
请添加图片描述
部署到 GitHub

hexo g -d

shell
  • 1

浏览器访问 https://yaorongke.github.io/，部署成功
请添加图片描述

方式二

直接将 public 目录中的文件和目录推送至 GitHub 仓库和分支中。
请添加图片描述

十、发布到自己服务器，Nginx 代理

如果自己有服务器的话，也可以不使用 GitHub Pages，直接部署的自己的服务器上，通过 Nginx 进行代理，我这里有一个阿里云上的 CentOS 7 版的 Linux 服务器，演示下如何部署，步骤如下。

打开 hexo-blog 根目录下的 _config.yml，增加如下配置，这是因为把网站存放在了子目录中，要和 Nginx 配置中的 location /blog 路径一致。

root: /blog

shell
  • 1

hexo-blog 根目录下执行打包命令，打包好的文件在 public 目录下

hexo g

shell
  • 1

将 public 目录下的文件复制到 Linux 服务器上的某个目录下，我的存放目录为

/opt/rkyao/fronted/hexo-blog

shell
  • 1

修改 Nginx 配置文件，我的 Nginx 安装路径为 /usr/local，大家根据自己实际情况调整

cd /usr/local/nginx/conf
vim nginx.conf
# server节点下添加如下配置
location /blog {
    alias  /opt/rkyao/fronted/hexo-blog;
    index  index.html index.htm;
}

shell
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

重启 Nginx

cd /usr/local/nginx/sbin
./nginx -s reload

shell
  • 1
  • 2

访问博客

http://47.96.106.173/blog/

shell
  • 1

十一、最终效果展示

可访问如下地址查看
https://yaorongke.github.io/

史上最新版 GitHub+Hexo 配置系列 教程 - Hexo 配置 (一)
SmallCheric
04-03 3165
为什么要写该系列教程因为最近在想搞一个自己的博客 , 发现 GitHub+Hexo 是最好的一个选择了，折腾了 2 天，发现网上的 教程虽然有很多，但是不全面，一步步操作下来并不能很好的完成博客的搭建 , 写下这个教程 , 一是为了总结，二是为了让更多的人少走弯路，更快的搭建好自己的博客平台.
使用 Github Pages 搭建个人博客
帅气陈吃苹果
04-23 1372
一、环境准备 使用 Github Pages 搭建个人博客，一劳永逸，可以让我们更加专注于博客的撰写。博客的更新是通过将新建或改动的博客放在指定文件夹并推送到远程 Github 仓库来完成的，所以我们本地需要有 Git 环境，如果还没有安装 Git，可以看下面的文章： 安装 Git [Git 关联远程 GitHub 仓库](https://www.cnblogs.com/jiechn/p/4615520.html) ...
Hexo 个人博客搭建教程
范子琦的博客
09-09 561
Hexo 个人博客搭建教程 1 搭建前准备 1.1 环境配置 需要安装 git、node，最后安装 hexo 1.1.1 安装 Git： 首先看电脑是否已经安装了 git $ git 若提示 not founded 则进行安装 # 未安装 homebrew 则先安装 homebrew $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" # 安装 git $ brew install
hexo 搭建博客记录
最新发布
weixin_42092564 的博客
05-13 37
这是一次 hexo 搭建博客并引入 archer 主题的使用记录。
利用 hexo+github 部署属于自己的 个人博客网站 (2025 年 3 月所写)
m0_74795952 的博客
03-17 1719
本篇博客仅限于利用 hexo 搭建博客，并且部署到 github 上面，让自己可以有一个访问的域名，不涉及 博客的上传以及博客网站的美化。当然笔者博客上传和网站美化以后会再写一篇博客进行说明参考自这两篇博客混着看的，因为有的地方这篇不行另外一篇可以，所以我混着来的，而且有的地方可能版本太老了，就不太对了，笔者就再加上笔者自己的情况供大家参考了。
Hexo 博客搭建教程（小白完整版）
aohh_的博客
04-19 1334
Hexo 博客搭建教程（小白完整版）
基于 Hexo 搭建博客并部署到 Github Pages
weixin_30765475 的博客
06-16 395
基于 Hexo 搭建博客并部署到 Github Pages 之前在简书上写东西，觉得自己还是太浮躁。本来打算用 Flask 自己写一个，以为是微框架就比较简单，naive。HTML、CSS、JS 等都要学啊，我几乎没有这方面的基础，写到 Web 表单那儿果断弃了，转向简单的 Hexo + Github Pages。不过要想 搭建博客的同时巩固 Python，Flask 确实是一个不错的选择。 获取 Github Pag...
Github Pages + Hexo 搭建自己的个人博客
Copcin 的小站
03-27 987
​ 1. 准备工作 本文示例环境：Windows 8.1 准备 1：有一个 GitHub 账号，网址，点击右上方 Sign Up 然后跟着提示一步一步走～ 准备 2：Git on Windows 要安排上，网址，点击下面 Assets 适合你电脑版本的安装包，记住一定要是 Git 开头的 .exe 结尾的文件！）然后安装，过程一路 Next~ 准备 3：有一个 Node.js 环境，网址，进去会比较慢，点击红箭头标出来的地址，也就是 Windows Installer (.msi) 右边的 64-bit
Github+Hexo 搭建个人博客 (图文详解)
热门推荐
不要用过去的错误约束现在的自己。
03-31 1 万 +
使用 Github+hexo 搭建个人博客 (Windows10) 1. 准备工作：安装两个我们本次所需要使用的软件： node.js 下载地址 - http://nodejs.cn Git 下载地址 - https://git-scm.com/(官网下载非常慢，可百度找资源哈) 安装过程一直 Next 就可以了 (安装路径可以改) 两者安装完成之后，右击此电脑》属性》高级系统设置》环境变量》系统变量下的 P...
从零开始：使用 GitHub + Hexo + Fluid 搭建个性化博客（附魔改与使用教程）
2302_80831260 的博客
04-06 947
在线制作 ico 图标 | 在线 ico 图标转换工具 方便制作 favicon.ico - 比特虫 - Bitbug.net 推荐使用该网站制作标签页小图标修改主题的_config.yml 文件，在语句后添加对应的路径# 用于浏览器标签的图标# 用于苹果设备的图标以如上命令为例，标签页小图标要存放在目录下，且应命名为 favicon.ico。
github.io+hexo+fluid 搭建个人博客的统计不生效问题处理
quanquanxingxing 的专栏
05-17 317
github.io+hexo+fluid 搭建个人博客的统计不生效问题处理
hexo 免费 搭建个人博客
weixin_74292291 的博客
02-17 1158
hexo 免费 搭建个人博客， hexo 命令的详细介绍
github 博客教程复现 | 1.0 Fork 模仿 & 2.0 利用 Hexo 搭建
weixin_47518190 的博客
08-20 929
由于是首次使用 git 环境而不懂原理，所以吃了一些苦头把上面的代码跑了三遍（得另外复制，git 没有 dofile 会留存代码文档，有点搞心态）。生成仓库镜像并返回更新的操作分别是拉取和推，而如果粘贴文件夹删除 教程中的 major 分支的话会报错，找错因后发现我们今天的博客案例当中分支名称是 main；事情是这样的，检索 cs61A 难点讨论的时候看见了其他小伙伴的 github 笔记，因此也想了解 博客搭设环境。在 Fork 原博主仓库的时候，我图方便改用户名的时候没有和自己的 github 名一致，这造成了 blog404 的结果。
Github Pages 搭建个人博客（2018 年 10 月版）
唐传林的博客
11-01 2898
Github Pages 搭建个人博客（2018 年 10 月版） 前言 几年前看到网上大神自己搭建的个人博客网站，就想过搭建一个属于自己的个人博客网站，为此还专门去研究了建站所需技能，但是购买了域名和云虚拟主机后由于其它事情又一直放着不了了之了。前不久看到了可以利用 Github Pages 搭建自己的博客网站，就更想把一直放着的这件事做了。 Github Pages 是面向用户、组织和项目开放的公共静态...
利用 Github 和 Hexo 搭建个人博客（2024 最新版）
lizhiwei21 的博客
05-20 1464
打开浏览器输入根据指引创建一个属于自己的 Github 账号，然后创建一个 个人仓库，具体操作如下点击红色标签地方打开点击右上角的 new~ 如下图进行一下勾选，然后根据需求补充内容，然后点击右下角的创建仓库然后在这里说一下如何查看自己的 github 仓库网址，进入自己的仓库以后，点击那个绿色的 code 然后，就能够看到了，这个在后面有用呢嘻嘻。
【图文教程】Hexo+GitHubPages 搭建个人博客
middle_age666 的博客
08-17 1728
Hexo 是一个高效的静态 网站生成器，使用简洁的 Markdown（或其他模板引擎）编写内容，支持丰富的插件和主题，允许用户轻松定制网站。它通过将文本转换为静态 HTML 页面，使得网站加载速度快，易于部署，同时支持多平台发布，非常适合创建博客、文档或个人网站。本文将介绍如何使用 Hexo 搭建个人博客并且将博客文章免费放到 github 上。more。
github pages 博客搭建
minyangchina 的专栏
09-11 494
github 提供了静态 博客服务，下面介绍下怎么简单的使用 第一步：注册 github 账号，例如 colanicy 第二步：建立一个空的仓库，仓库名为：colanicy.github.io 第三步：clone 这个空仓库到本地 (建议使用 cmder) git clone http://github.com/colanicy/colanicy.github.io 第四步：找一个 git